import BarChart from './BarChart'
import TestModal from './TestModal'
import { Button } from 'antd'
import useStore from '../../store/zustandstore'
import React, { useState } from 'react'
import flowChart from '../../assets/flowChart.svg'
function Home() {
  const {  count,increment,decrement } = useStore()
  const [visible, setVisible] = useState(false)
  const onCancel = () => {
    setVisible(false)
  }
    return (
      <div>
        <h1>Home</h1>
        <p>Count: {count}</p>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
        <Button onClick={() => setVisible(true)}>测试弹窗组件通信</Button>
        <TestModal visible={visible} onCancel={onCancel} />
        <img src={flowChart} alt="" width='100%' />
        <BarChart  
           xData={['Vue', 'React', 'Angular']}
           sData={[2000, 5000, 1000]}
        />
         <BarChart
          xData={['Vue', 'React', 'Angular']}
          sData={[200, 500, 100]}
          style={{ width: '500px', height: '400px' }} 
        />
      </div>
    )
  }
  export default Home